<!--
这个文件定义了一个名为 `Register` 的 Vue 组件，用于用户注册。
组件包含以下部分：
- template: 包含注册表单的结构和样式：
  - `registerForm` 容器包含以下内容：
    - `registerTitle`: 显示标题 "注册"。
    - 输入项：包括用户名和密码输入框，分别绑定到 `registerForm.username` 和 `registerForm.password`。
    - 提交按钮：点击时调用 `register` 方法。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了以下内容：
  - `registerForm`: 一个包含用户名和密码的响应式对象。
  - `register`: 一个方法，用于处理注册逻辑。如果表单验证通过，则打印表单数据并清空表单。
-->

<template>
    <div id="registerForm">
        <span id="registerTitle">注册</span>
        <div class="input-item">
            <div class="input-title">用户名</div>
            <input class="input" v-model="registerForm.username">
        </div>
        <div class="input-item">
            <div class="input-title">密码</div>
            <input class="input" v-model="registerForm.password" type="password">
        </div>
        <div class="input-item">
            <button class="submit-btn" @click="register">注册</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const registerForm = ref({
    username: '',
    password: ''
})

function register () {
    if (formCheck()) {
        console.log(registerForm.value)
        clearForm()
    }
}

function formCheck () {
    if (registerForm.value.username === '' || registerForm.value.password === '') {
        alert('用户名或密码不能为空')
        return false
    }
    return true
}

function clearForm () {
    registerForm.value.username = ''
    registerForm.value.password = ''
}
</script>

<style scoped>
#registerForm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#registerTitle {
    margin-top: 150px;
    font-size: 45px;
    font-weight: bold;
    color: #2a598a;
}

.input {
    margin-top: 10px;
    width: 400px;
    height: 60px;
    padding: 0 25px;
    outline: none;
    font-size: 16px;
    border-radius: 25px;
    border: 1px solid #ccc;
}

.input-item {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.submit-btn {
    margin-top: 20px;
    width: 200px;
    height: 50px;
    font-size: 18px;
    color: #fff;
    background-color: #2a598a;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

.submit-btn:hover {
    background-color: #1e456b;
}
</style>